/* 桌面端 */
@media screen and (min-width: 911px) {
    .myBlog-main {
        flex: 1;
        display: flex;
        flex-direction: column;
        background-color: var(--bg-color-three);

        .myBlog-head {
            margin: 50px 40px 0 40px;
            background-color: var(--bg-one-color);
            border-radius: 10px;
        }

        .myBlog-body {
            margin: 1em 40px 10px 40px;
            flex: 1;
            display: flex;
            flex-direction: row;

            .myBlog-body-left {
                flex: 1;
                margin-right: 1em;
                display: flex;
                flex-direction: column;

                .myBlog-Calendar {
                    margin-bottom: 1em;
                }

                .myBlog-personBlogClass {
                    display: flex;
                    flex-direction: column;
                    background-color: var(--bg-one-color);
                    border-radius: 10px;
                    padding: 1em;

                    .myBlog-personBlogClass-title {
                        padding-left: 10px;
                        margin-bottom: 10px;
                        font-size: 1.5em;
                        color: var(--one-font-color);
                    }

                    .myBlog-personBlogClass-body {
                        display: flex;
                        flex-direction: column;
                        flex-direction: row;
                        flex-wrap: wrap;
                        gap: 10px;

                        span {
                            padding: 2px 15px;
                            cursor: pointer;
                            background-color: var(--bg-color-six);
                            color: var(--font-seven);
                            border-radius: 3px;
                            border: solid 1px var(--bg-two-color);
                        }
                    }
                }
            }

            .myBlog-body-right {
                flex: 3;
                background-color: var(--bg-one-color);
                border-radius: 10px;

                .myBlog-body-right-blogCard {
                    padding: 1em;

                    .myBlog-body-right-blogCard-header {
                        display: flex;
                        flex-direction: row;
                        align-items: center;

                        .ant-tag {
                            height: 2em;
                            margin: 0 0 1em 1em;
                        }

                        .myBlog-body-right-blogCard-sort {
                            display: flex;
                            flex-direction: row;
                            list-style-type: none;
                            padding: 1em;
                            background-color: var(--bg-color-six);
                            border-radius: 10px;
                            width: fit-content;
                            margin-top: 0;

                            li {
                                cursor: pointer;
                                font-weight: bold;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 910px) {
    .myBlog-main {
        flex: 1;
        display: flex;
        flex-direction: column;
        background-color: var(--bg-color-three);

        .myBlog-head {
            margin: 3em 1em 0 1em;
            background-color: var(--bg-one-color);
            border-radius: 10px;
        }

        .myBlog-body {
            margin: 1em;
            flex: 1;
            display: flex;
            flex-direction: column;

            .myBlog-body-left {
                display: none;
                flex: 1;
                margin-right: 1em;
                background-color: var(--bg-one-color);
                border-radius: 10px;
            }

            .myBlog-body-right {
                flex: 3;
                background-color: var(--bg-one-color);
                border-radius: 10px;

                .myBlog-body-right-blogCard {
                    padding: 1em;

                    .myBlog-body-right-blogCard-header {
                        display: flex;
                        flex-direction: row;
                        align-items: center;

                        .ant-tag {
                            height: 2em;
                            margin: 0 0 1em 1em;
                        }

                        .myBlog-body-right-blogCard-sort {
                            display: flex;
                            flex-direction: row;
                            list-style-type: none;
                            padding: 1em;
                            background-color: var(--bg-color-six);
                            border-radius: 10px;
                            width: fit-content;
                            margin-top: 0;

                            li {
                                cursor: pointer;
                                font-weight: bold;
                            }
                        }
                    }
                }
            }
        }
    }
}